<template>
  <div id="pdf-container"></div>
</template>

<script>
import PDFJS from 'pdfjs-dist'
import pdfWorker from 'pdfjs-dist/build/pdf.worker'
// PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'
import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer'
import 'pdfjs-dist/web/pdf_viewer.css'
PDFJS.GlobalWorkerOptions.workerSrc = pdfWorker

let container
export default {
  name: 'pdfViewer',
  data() {
    return {
      url: '',
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      // let url = 'http://192.168.3.213:85/group1/M00/00/35/wKgD1V-iZHWAQw32AAcCGy_uzck909.pdf'
      const url = this.$route.query.url || ''
      this.getPDF(url)
    })
  },
  methods: {
    async getPDF(url) {
      const pdf = await PDFJS.getDocument(url)
      container = container || document.querySelector('#pdf-container')
      for (let i = 1; i <= pdf.numPages; i++) {
        try {
          await this.rendPDF(pdf, i)
        } catch (e) {
          // console.error(e)
        }
      }
    },
    async rendPDF(pdf, num) {
      const page = await pdf.getPage(num)
      // 设置展示比例
      const scale = 3.2
      const viewport = page.getViewport(scale)
      const pageDiv = document.createElement('div')
      pageDiv.setAttribute('class', 'page')
      pageDiv.setAttribute('id', 'page-' + (page.pageIndex + 1))
      container.appendChild(pageDiv)
      const canvas = document.createElement('canvas')
      pageDiv.appendChild(canvas)
      const context = canvas.getContext('2d')

      const viewWidth = viewport.width
      const viewHeight = viewport.height

      const displayWidth = 880
      const displayScale = Math.floor((viewWidth * 100) / displayWidth) / 100

      canvas.width = viewWidth
      canvas.height = viewHeight
      canvas.setAttribute('style', `width: ${displayWidth}px;`)

      const renderContext = {
        canvasContext: context,
        viewport: viewport,
      }

      await page.render(renderContext)
      const textContent = await page.getTextContent()
      // 创建文本图层div
      const textLayerDiv = document.createElement('div')
      textLayerDiv.setAttribute('class', 'textLayer')
      textLayerDiv.setAttribute('style', `width: ${displayWidth}px;`)
      // 将文本图层div添加至每页pdf的div中
      pageDiv.appendChild(textLayerDiv)

      const textViewport = JSON.parse(JSON.stringify(viewport))
      textViewport.height = textViewport.height / displayScale
      textViewport.width = textViewport.width / displayScale
      textViewport.scale = scale / displayScale
      textViewport.transform = textViewport.transform.map(item => {
        return item / displayScale
      })

      // 创建新的TextLayerBuilder实例
      const textLayer = new TextLayerBuilder({
        textLayerDiv: textLayerDiv,
        pageIndex: page.pageIndex,
        viewport: textViewport,
      })

      textLayer.setTextContent(textContent)

      textLayer.render()
    },
  },
}
</script>

<style lang="scss">
#pdf-container {
  // width: 892px;
  height: 100%;
  overflow: scroll;
  background-color: rgba(237, 237, 240, 1);
  text-align: center;
  display: flex;
  flex-direction: column;
  .textLayer {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
  }

  .page {
    position: relative;
    overflow: visible;
    border: 9px solid transparent;
    border-image: url(../../assets/images/shadow.png) 9 9 repeat;
    margin: 0px auto;
    background: #fff;
    background-clip: content-box;
  }
}
</style>
